<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏等待房间</title>
    <link rel="icon" type="image/png" href="./img/favicon.png">
    <link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="css/WaitRoom.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- 页眉部分 -->
<header class="header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <!--渲染退出按钮-->
            <div id="room-quit"></div>
            <!--渲染房间信息-->
            <div id="room-info" class="text-center"></div>
            <!--渲染修改按钮-->
            <div id="room-revise" class="room-revise"></div>
        </div>
    </div>
</header>

<!-- 主要内容 -->
<main class="container mb-5">
    <!-- 玩家状态区域 -->
    <div class="player-container">
        <h3 class="section-title">玩家状态</h3>
        <div id="player-list" class="row g-4">

        </div>
    </div>

    <!-- 观战席区域 -->
    <div class="spectator-container">
        <h3 class="section-title">观战席</h3>
        <div id="spectator-list" class="d-flex flex-wrap">

        </div>
    </div>
</main>

<!-- 修改房间模态框 -->
<div class="modal fade" id="editRoomModal" tabindex="-1" aria-labelledby="editRoomModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editRoomModalLabel">修改房间</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editRoomForm">
                    <input type="hidden" id="editRoomId">
                    <div class="mb-3">
                        <label for="editRoomName" class="form-label">房间名称</label>
                        <input type="text" class="form-control" id="editRoomName" required>
                    </div>
                    <div class="mb-3">
                        <label for="RoomPassword" class="form-label">房间密码</label>
                        <input type="text" class="form-control" id="RoomPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="editRoomType" class="form-label">房间类型</label>
                        <select class="form-select" id="editRoomType">
                            <option value="public">公开房间</option>
                            <option value="private">私密房间</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="SaveYourChanges"  type="submit" form="editRoomForm" class="btn btn-primary">保存修改</button>
            </div>
        </div>
    </div>
</div>

<script src="./js/bootstrap.bundle.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/waitRoom/WaitRoomDataRendering.js" type="module"></script>
</body>
</html>

